<template>
  <c-dialog ref="dialog" :data="selData" single title="拆分图纸" width="80vw" @close="closeHandle">
    <div class="split">
      <div class="left">
        <ul>
          <li class="title"><span>原图纸内容</span></li>
          <li>
            <div>图纸任务名称</div>
            <div>{{ detail.picTaskName }}</div>
          </li>
          <li>
            <div>设计区域</div>
            <c-design-area :value="detail.designSpace" />
          </li>
          <li>
            <div>业务类型</div>
            <c-dict-range-view dict-type-code="BIZ_TYPE" :value="detail.designBizType" />
          </li>
          <li>
            <div>图纸总面积</div>
            <div>{{ detail.picTotalArea }}</div>
          </li>
          <li>
            <div>软体区总面积</div>
            <div>{{ detail.softwareSumArea }}</div>
          </li>
          <li>
            <div>套房区总面积</div>
            <div>{{ detail.suiteSumArea }}</div>
          </li>
          <li>
            <div>新业务总面积</div>
            <div>{{ detail.newBusinessAreaSummary }}</div>
          </li>
          <li>
            <div>是否含成融定</div>
            <c-dict-range-view dict-type-code="BOOLEANS" :value="detail.haveEAndC" />
          </li>
          <li>
            <div>成融定面积</div>
            <div>{{ detail.eandCArea }}</div>
          </li>
        </ul>
      </div>
      <div class="middle">
        <el-input-number v-model="num" :min="2" />
        <el-button type="primary" @click="addData">拆分<i class="el-icon-d-arrow-right" /></el-button>
      </div>
      <div class="right">
        <ul>
          <li>
            <div v-if="(splitData.picTaskName || []).length===0" style="font-weight:700">拆分图纸</div>
            <div v-else />
            <template>
              <div v-for="(s,n) in splitData.picTaskName || []" :key="n">
                <el-input v-model="splitData.picTaskName[n]" placeholder="请输入图纸名称" clearable />
              </div>
            </template>
          </li>
          <li>
            <div>设计区域</div>
            <div v-for="(s,n) in splitData.designSpace || []" :key="n">
              <el-select v-model="splitData.designSpace[n]" multiple clearable filterable style="width:100%" @change="v=>spachChangeHandle(v,n)">
                <el-option v-for="(d,i) in designSpaceList" :key="i" :value="d.dictCode" :label="d.dictName" />
              </el-select>
            </div>
          </li>
          <li>
            <div>业务类型</div>
            <div v-for="(s,n) in splitData.designBizType || []" :key="n">
              <el-select v-model="splitData.designBizType[n]" disabled multiple clearable filterable style="width:100%">
                <el-option v-for="(d,i) in designBizTypeList" :key="i" :value="d.dictCode" :label="d.dictName" />
              </el-select>
            </div>
          </li>
          <li>
            <div>图纸总面积</div>
            <div v-for="(s,n) in splitData.picTotalArea || []" :key="n">
              <c-input-number v-model="splitData.picTotalArea[n]" float />
            </div>
          </li>
          <li>
            <div>软体区总面积</div>
            <div v-for="(s,n) in splitData.softwareSumArea || []" :key="n">
              <c-input-number v-model="splitData.softwareSumArea[n]" float />
            </div>
          </li>
          <li>
            <div>套房区总面积</div>
            <div v-for="(s,n) in splitData.suiteSumArea || []" :key="n">
              <c-input-number v-model="splitData.suiteSumArea[n]" float />
            </div>
          </li>
          <li>
            <div>新业务总面积</div>
            <div v-for="(s,n) in splitData.newBusinessAreaSummary || []" :key="n">
              <c-input-number v-model="splitData.newBusinessAreaSummary[n]" float />
            </div>
          </li>
          <li>
            <div>是否含成融定</div>
            <div v-for="(s,n) in splitData.haveEAndC || []" :key="n">
              <el-select v-model="splitData.haveEAndC[n]" filterable clearble style="width:100%" @change="v=>haveEAndcChangeHandle(v, n)">
                <el-option v-for="(l,i) in haveEAndCList" :key="i" :value="l.dictCode" :label="l.dictName" />
              </el-select>
              <!-- <c-dict-select v-model="splitData.haveEAndC[n]" dict-type-code="BOOLEANS" style="width:100%" /> -->
            </div>
          </li>
          <li>
            <div>成融定面积</div>
            <div v-for="(s,n) in splitData.eandCArea || []" :key="n">
              <c-input-number v-model="splitData.eandCArea[n]" :disabled="$toString(splitData.haveEAndC[n]) === '0'" float />
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="btn-container">
      <c-button @click="cancelHandle">取消</c-button>
      <c-button type="primary" @click="confirmHandle">确定</c-button>
    </div>
  </c-dialog>
</template>
<script>
import { SLMDict } from '@/api/dataDict'
import { putSplitPicture } from '@/api/shopDrawing'
import getBizType from '../../js/spaceBiz'
export default {
  name: 'Split',
  props: {
    selData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      splitData: {},
      num: 2,
      BELONG_REGION: [],
      BIZ_TYPE: []
    }
  },
  computed: {
    detail() {
      return this.selData.length !== 0 ? this.selData[0] : {}
    },
    // 设计区域选择范围
    designSpaceList() {
      return this.BELONG_REGION.filter(e => (this.detail.designSpace || '').includes(e.dictCode))
    },
    designBizTypeList() {
      return this.BIZ_TYPE.filter(e => (this.detail.designBizType || '').includes(e.dictCode))
    },
    // 是否含成融定
    haveEAndCList() {
      return (this.detail.haveEAndC || '').toString() === '1' ? [
        { dictCode: '1', dictName: '是' },
        { dictCode: '0', dictName: '否' }
      ] : [{ dictCode: '0', dictName: '否' }]
    }
  },
  created() {
    this.getDictData()
  },
  methods: {
    addData() {
      const n = this.num
      this.splitData = {
        picTaskName: new Array(n).fill(''),
        designSpace: new Array(n).fill(''),
        designBizType: new Array(n).fill(''),
        picTotalArea: new Array(n).fill(0),
        softwareSumArea: new Array(n).fill(0),
        suiteSumArea: new Array(n).fill(0),
        newBusinessAreaSummary: new Array(n).fill(0),
        haveEAndC: new Array(n).fill('0'),
        eandCArea: new Array(n).fill(0)
      }
    },
    closeHandle() {
      this.splitData = {}
    },
    validateSplitData() {
      // 验证 图纸总面积 成品面积汇总 新业务总面积 成融定面积
      const { designSpace, designBizType, picTaskName, picTotalArea, softwareSumArea, suiteSumArea, newBusinessAreaSummary, haveEAndC, eandCArea } = this.splitData
      if ((picTaskName || []).some(e => e === '')) {
        this.$message.warning('请输入图纸名称！')
        return Promise.reject(null)
      }
      const _designSpace = []
      const $designSpace = []
      for (const s of designSpace) {
        if (s instanceof Array) {
          _designSpace.push(...s)
          $designSpace.push(s.join(','))
        } else {
          _designSpace.push(s)
          $designSpace.push(s)
        }
      }
      const _designBizType = []
      const $designBizType = []
      for (const s of designBizType) {
        if (s instanceof Array) {
          // if (s.length === 0) {
          //   this.$message.warning('请选择业务类型！')
          //   return Promise.reject(null)
          // }
          _designBizType.push(...s)
          $designBizType.push(s.join(','))
        } else {
          _designBizType.push(s)
          $designBizType.push(s)
        }
      }
      // 设计区域
      // const rawDesignSpace = new Set(this.$split(this.detail.designSpace))
      // const rawDesignBizType = new Set(this.$split(this.detail.designBizType))
      if (!this.$eqSet(_designSpace, this.detail.designSpace)) {
        this.$message.warning('设计区域集合与拆分前不一致！')
        return Promise.reject(null)
      }
      if (!this.$eqSet(_designBizType, this.detail.designBizType)) {
        this.$message.warning('业务类型集合与拆分前不一致！')
        return Promise.reject(null)
      }
      // 成融定
      const rawHaveEAndC = (this.detail.haveEAndC || '').toString()
      if ((rawHaveEAndC === '1' && !haveEAndC.includes('1')) || (rawHaveEAndC === '0' && haveEAndC.includes('1'))) {
        this.$message.warning('是否含成融定与拆分前不一致！')
        return Promise.reject(null)
      }
      const validateSum = (v, sum) => {
        return sum !== (v || []).reduce((pre, cur, i, arr) => {
          console.log(pre * 1 + cur * 1)
          return pre * 1 + cur * 1
        }, 0)
      }
      if (validateSum(picTotalArea, this.detail.picTotalArea || 0)) {
        this.$message.warning('图纸总面积与拆分前不同！')
        return Promise.reject(null)
      }
      if (validateSum(softwareSumArea, this.detail.softwareSumArea || 0)) {
        this.$message.warning('软体区总面积与拆分前不同！')
        return Promise.reject(null)
      }
      if (validateSum(suiteSumArea, this.detail.suiteSumArea || 0)) {
        this.$message.warning('套房区总面积与拆分前不同！')
        return Promise.reject(null)
      }
      if (validateSum(newBusinessAreaSummary, this.detail.newBusinessAreaSummary || 0)) {
        this.$message.warning('新业务总面积与拆分前不同！')
        return Promise.reject(null)
      }
      if (validateSum(eandCArea, this.detail.eandCArea || 0)) {
        this.$message.warning('成融定面积与拆分前不同！')
        return Promise.reject(null)
      }
      const data = []
      for (let i = 0; i < (picTotalArea || []).length; i++) {
        data.push({
          designBizType: ($designBizType || [])[i], //	设计业务类型：1成品2全屋定制3整体橱柜4卫浴5样板间
          designSpace:	($designSpace || [])[i], // 设计区域：1成品2全屋定制3整体橱柜4卫浴5样板间
          picTotalArea: (this.splitData.picTotalArea || [])[i], // 图纸总面积
          haveEAndC:	(this.splitData.haveEAndC || [])[i], //
          eandCArea:	(this.splitData.eandCArea || [])[i], //
          newBusinessAreaSummary: (this.splitData.newBusinessAreaSummary || [])[i], //	新业务面积汇总
          picTaskName:	(this.splitData.picTaskName || [])[i], // 图纸名称
          softwareSumArea:	(this.splitData.softwareSumArea || [])[i], // 软体区总面积
          suiteSumArea:	(this.splitData.suiteSumArea || [])[i]// 套房区总面积
        })
      }
      return Promise.resolve(data)
    },
    confirmHandle() {
      return this.$msgbox({
        title: '提示',
        message: '确认后将作废原图纸同时新增拆分后图纸，是否确认？',
        showCancelButton: true,
        type: 'warning'
      }).then(() => {
        return this.validateSplitData().then(splitData => {
          const data = { ...this.detail }
          data.splitPictureDTOList = splitData
          return putSplitPicture(data).then(res => {
            this.$message.success('图纸拆分成功！')
            this.$emit('on-success')
            this.cancelHandle()
          })
        })
      })
    },
    cancelHandle() {
      this.$refs.dialog.visible = false
    },
    getDictData() {
      this.BELONG_REGION = this.$getCfgAreas().map(e => {
        e.dictCode = e.areaCode
        e.dictName = e.areaName
        return e
      })
      // SLMDict('BELONG_REGION').then(res => {
      //   this.BELONG_REGION = res.data
      // })
      SLMDict('BIZ_TYPE').then(res => {
        this.BIZ_TYPE = res.data
      })
    },
    // 是否含成融定变化时，清空成融定面积
    haveEAndcChangeHandle(v, n) {
      this.$set(this.splitData.eandCArea, n, 0)
    },
    // 设计区域到设计业务类型对应
    spachChangeHandle(v, n) {
      this.$set(this.splitData.designBizType, n, getBizType(v, this.detail.designBizType))
    }
  }
}
</script>
<style lang="scss" scoped>
.split{
  display: flex;
  .left{
    flex: 0 0 calc(40% - 100px);
    .title{
      text-align: center;
      justify-content: center;
      font-weight: 700;
    }
    ul {
      li{
        &>div:last-of-type{
          border-left: 1px solid #ddd;
          flex: 0 0 50% !important;
        }
      }
    }
  }
  .middle{
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    &>:last-of-type{
      margin-top: 10px;
    }
  }
  .right{
    flex: 0 0 calc(60% - 100px);
  }
  ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
      border: 1px solid #ddd;
      border-bottom: none;
      flex: 0 0 100%;
      li{
        flex: 0 0 100%;
        display: flex;
        box-sizing: border-box;
        justify-content: flex-start;
        align-items: center;
        border-bottom: 1px solid #ddd;
        // text-align: center;
        &>*{
          padding: 5px;
          box-sizing: border-box;
          height: 100% !important;
        }
        &>div:first-of-type{
          flex: 0 0 100px;
          text-align: center;
        }
        &>div:not(:first-of-type){
          border-left: 1px solid #ddd;
          flex: 1 1 50%;
        }
      }
  }
}
</style>
